<style lang="sass" scoped>
	#side,
	.el-menu {
		height: 100%;
		width: 100%;
		border: 0;
	}
</style>
<template>
	<div id="side">

		<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
		 router>
			<div class="logo">
				LOGO
			</div>
			<el-submenu index="1">
				<template slot="title">
					<i class="el-icon-location"></i>
					<span>一级导航</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="/">index</el-menu-item>
					<el-menu-item index="/home/home">home</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
			<el-submenu index="2">
				<template slot="title">
					<i class="el-icon-location"></i>
					<span>一级导航</span>
				</template>
				<el-menu-item-group>
					<el-menu-item index="2-1">二级</el-menu-item>
					<el-menu-item index="2-2">二级</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
		</el-menu>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				activeIndex: ""
			};
		},
		computed: {},
		created() { 
			this.activeIndex = this.$route.path;
		},
		mounted() {
			this.$nextTick(() => {
			});
		},
		methods: {}
	};
</script>